<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键词：" prop="keyWord">
          <el-input
            placeholder="合同号，姓名等"
            v-model="query.keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="结算状态:" prop="keyWord">
          <el-select v-model="query.isOver" placeholder="请选择">
            <el-option
              v-for="item in statusArray"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前代扣预警:" prop="keyWord">
          <el-select v-model="query.currentStatus" placeholder="请选择">
            <el-option
              label="无预警"
              value="0"
            >
            </el-option>
            <el-option
              label="代扣失败"
              value="1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空
          </el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索
          </el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              @click="orderExport"
              v-no-more-click
              v-if="userInfoExport"
            >导出
            </el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :row-key="getRowKey"
      @selection-change="changeFun"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="36"
        class-name="checkBox"
      />
      <el-table-column
        prop="contractNo"
        label="执行合同"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="signName"
        label="姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="phoneNumber"
        label="联系方式"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="belongName"
        label="归属经纪人"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="channelName"
        label="归属渠道客服"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="stagesAmount"
        label="分期金额"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="factoringMoney"
        label="保理金额"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="stagesNum"
        label="执行期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="completedNum"
        label="实时期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="beginDate"
        label="开始月"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overAmount"
        label="剩余待还"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="completedAmount"
        label="累计已还"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overdueNum"
        label="累计逾期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="principalMoney"
        label="每期金额"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldDay"
        label="扣款日期"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="chargeFailedNum"
        label="扣款失败总期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="chargeFailedMoney"
        label="扣款失败总金额"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="currentStatus"
        label="当期代扣预警"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="isOverText"
        label="结清状态"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overTime"
        label="结清时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="detailsFun(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
          >分期明细
          </el-button
          >

          <el-button
            type="text"
            size="small"
            @click="earlySettlement(scope.row)"
            v-if="scope.row.isOver == 0"
            style="color: #ffa42f"
            v-no-more-click
          >提前结清
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click="queryData(scope.row)"
            style="color: #FB575E"
            v-no-more-click
          >风险联查
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="分期明细"
      :visible.sync="PersonnelDia"
      append-to-body
      width="70%"
      top="30px"
    >
      <Personnel
        :diaId="diaId"
        :PersonnelDia="PersonnelDia"
        v-if="PersonnelDia"
        v-on:PersonnelDia="closeDialog($event)"
      ></Personnel>
    </el-dialog>
    <el-dialog
      title="提前结算:"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-form :inline="true" style="text-align: left">
          <el-col :span="24" class="indexClass">
            <span class="indexBox">*</span>
            <el-form-item label="结清金额:" label-width="100px">
              <el-input
                maxlength="9"
                type="number"
                v-model="form.overMoney"
                placeholder="请输入结清金额"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="退保证金金额:" label-width="100px">
              <el-input
                maxlength="9"
                type="number"
                v-model="form.earnestMoney"
                placeholder="请输入保证金金额"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结清时间:" label-width="100px">
              <el-date-picker
                class="timeIndex"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.overTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shut">取 消</el-button>
        <el-button type="primary" @click="uplodForm">确 定</el-button>
      </span>
    </el-dialog>
    <!--    风险联查-->
    <el-dialog
      :visible.sync="fxDialogVisible"
      width="80%"
      :before-close="downButton"
    >
      <div class="Maxbox">
        <section>
          <div
            style="
              width: 158px;
              text-align: left;
              font-size: 18px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              height: 14px;
              line-height: 21px;
              color: #333333;
              margin-bottom: 29px;
              font-weight: bold;
            "
          >
            法院失信与执行人查询:
          </div>
          <!-- <div v-if="retrieveData.length===0" class="dataStyle">
            暂无数据~
          </div> -->
          <div class="dataStyle" v-if="infoerror">
            {{ msg }}
          </div>
          <div class="dataStyle" v-if="infoerror1">
            {{ msg }}
          </div>
          <div v-if="promises">
            <div
              v-for="(item, index) in retrieveData"
              :key="index"
              class="boxStyle"
            >
              <div class="indexStyle">
                <label class="spanStyle">案号：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.caseCode"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.caseCode }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">法院号：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.courtId"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.courtId }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">法院名：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.courtName"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.courtName }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <label class="spanStyle">身份证号：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.identityNo"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.identityNo }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <label class="spanStyle">立案时间：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.regDate"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.regDate }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div
            style="
              width: 117px;
              text-align: left;
              font-size: 18px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              height: 14px;
              line-height: 21px;
              color: #333333;
              margin-bottom: 29px;
              font-weight: bold;
              margin-top: 111px;
            "
          >
            法院涉诉综合查询:
          </div>
          <div class="dataStyle" v-if="errData">
            {{ msgs }}
          </div>
          <div class="dataStyle" v-if="errData1">
            {{ msgs }}
          </div>
          <!-- <div v-if="courtData.length === 0" class="dataStyle">暂无数据~</div> -->
          <div v-if="litigation">
            <div
              v-for="(item, index) in courtData"
              :key="index"
              class="boxStyle"
            >
              <div class="indexStyle">
                <label class="spanStyle">案件号：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.caseNo"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.caseNo }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">法院：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.court"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.court }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">文书公告ID：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.cpwsId"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.cpwsId }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <label class="spanStyle">排序时间：</label
                >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.sortTime"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.sortTime }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <label class="spanStyle">标题：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.title"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.title }}</span>
                </el-tooltip>
              </div>
              <div>
                <label class="spanStyle">主体：</label
                ><span>{{ item.body }}</span>
              </div>
            </div>
          </div>
        </section>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downButton">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPagePerson,
  postSettlement,
  getPermType, identity, PromiseQuery, courtInfo
} from "../../../src/assets/js/api";
import Personnel from "../../components/byStages/Personnel";
import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  name: "PersonnelStaging",
  components: { Personnel },
  data() {
    return {
      dialogVisible: false,
      query: {
        pageSize: 10,
        pageNo: 1,
        keyWord: null
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      PersonnelDia: false,
      diaId: "",
      ids: [],
      fileParmas: {},
      form: {
        overMoney: "",
        earnestMoney: "",
        overTime: "",
        currentStatus:'',
      },
      statusArray: [],
      golbalPermissions: [],
      fxDialogVisible: false,
      infoerror: false, //法院失信与执行人数据错误开关!!
      infoerror1: false, //法院失信与执行人暂无数据开关!
      msg: "", //法院失信与执行人查询错误信息message!
      msgs: "", //法院涉诉综合查询错误信息message!
      promises: false, //法院失信与执行人查询内容区域开关!
      retrieveData: [], //执行人检索!
      errData: false, //法院涉诉综合查询错误信息开关!
      errData1: false, //法院涉诉综合查询暂无数据开关!
      litigation: false, //法院综合查询区域开关!
      courtData: [] //查询用户的法院涉诉!
    };
  },
  created() {
    this.getList();
    this.getStatusData();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function() {
      return checkPermiss("business:sign:exportPerson", this.golbalPermissions);
    }
  },
  methods: {
    //弹出层关闭按钮!
    downButton() {
      this.fxDialogVisible = false;
      this.infoerror = false;
      this.infoerror1 = false;
      this.errData = false;
      this.errData1 = false;
      this.promises = false;
      this.litigation = false;
    },
    //打开风控大数据查询弹窗!
    queryData(row) {

      console.log(row);
      let obj={idCard:row.idCard,name:row.signName};
      // let obj = {
      //   idCard: "510211198201070328", name: "戴大燕"
      // };
      identity(obj).then((res) => {
        if (res.code == 500) {
          this.$message.error(res.message);
        } else {
          this.fxDialogVisible = true;
          PromiseQuery(obj).then((res) => {
            if (res.data == null) {
              this.infoerror = true;
              this.msg = res.message;
            }
            if (res.code == 200 && res.data.length === 0) {
              this.infoerror1 = true;
              this.msg = "暂无数据~";
            } else if (res.code == 200) {
              this.promises = true;
              this.retrieveData = res.data;
            }
          });
          courtInfo(obj).then((res) => {
            if (res.data == null) {
              this.errData = true;
              this.msgs = res.message;
            }
            if (res.code == 200 && res.data.length === 0) {
              this.errData1 = true;
              this.msgs = "暂无数据~";
            } else if (res.code == 200) {
              this.courtData = res.data;
              this.litigation = true;
            }
          });
          // taxData(this.form).then((res) => {
          //   this.taxInfo = res.data;
          // });
        }
      });

    },
    // 弹窗取消按钮!
    shut() {
      this.dialogVisible = false;
      this.form.earnestMoney = "";
      this.form.overMoney = "";
    },
    // 获取状态数组列表!
    getStatusData() {
      getPermType("isOver_status").then((res) => {
        this.statusArray = res.data;
      });
    },

    // 提前结清金额弹窗监听!
    handleClose() {
      this.dialogVisible = false;
      this.form.earnestMoney = "";
      this.form.overMoney = "";
      this.form.overTime = "";
    },
    // 提前结清按钮!
    earlySettlement(data) {
      this.form.overMoney = "";
      this.form.earnestMoney = "";
      this.form.overTime = "";
      this.form.id = data.id;
      this.dialogVisible = true;
    },
    // 结清提交按钮!
    uplodForm() {
      if (this.form.overMoney == "") {
        this.$message.error("请输入结清金额!");
        return;
      } else {
        postSettlement(this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.dialogVisible = false;
            this.getList();
          } else {
            this.form.earnestMoney = null;
            this.form.overMoney = null;
            this.$message.error(res.message);
          }
        });
      }
    },
    //   获取数据
    getList() {
      getPagePerson(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    // 分期明细
    detailsFun(row) {
      this.PersonnelDia = true;
      this.diaId = row.id;
    },
    // 查看分期
    viewStagingFun() {
    },
    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query.isOver = "";
      this.query.keyWord = "";
      this.getList();
    },
    //关闭弹窗
    closeDialog(msg) {
      this.PersonnelDia = msg;
    },
    // 搜索按钮
    queryFun() {
      this.query.pageNo = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    // 批量
    getRowKey(row) {
      return row.id;
    },
    changeFun(row) {
      this.ids = row.map((item) => item.id);
    },
    orderExport() {
      this.fileParmas.isOver = this.query.isOver;
      this.fileParmas.keyWord = this.query.keyWord;
      this.fileParmas.ids = this.ids;
      expotOut(
        "get",
        "/business/sign/exportPerson",
        this.fileParmas, // 导出请求参数
        "人员分期表" // 导出文件名字
      );
    }
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 18px;
  color: red;
}

.itemSTyle {
  position: relative;
}

.buttonStyle {
  position: absolute;
  right: 0;
  color: #fff;
  background-color: #fb575e;
}

.spanStyle {
  display: inline-block;
  text-align: right;
  width: 100px;
}

.labelStyle {
  display: inline-block;
  text-align: right;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labelStyles {
  display: inline-block;
  text-align: left;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indexStyle {
  display: inline-block;
  height: 21px;
  width: 33.33%;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.boxStyle {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}

.spanStylek {
  display: inline-block;
  width: 290px;
}

.Maxbox {
  height: 600px;
  overflow: auto;
}

.Maxbox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.Maxbox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 122, 204);
  box-shadow: inset 0 0 5px rgba(0, 122, 204);
}

/*//滚动条底层颜色!*/
.Maxbox::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;

  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.dataStyle {
  margin-top: 30px;
  margin-bottom: 30px;
}

/deep/ input:disabled::-webkit-input-placeholder {
  -webkit-text-fill-color: #3b9df8;
}



.indexell {
  margin-top: 15px;
  color: transparent;
}
</style>
